[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Sidebar } from "@/components/sidebar" import { AnalyticsDashboard } from "@/components/analytics-dashboard" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/verified-icon.tsx" isMerged="true" export function VerifiedIcon({ className = "w-[18px] h-[18px]" }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="lib/random-data.ts" isMerged="true" // Utility functions to generate random analytics data export function generateRandomMetrics() { const formatNumber = (num: number) => { if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M` if (num >= 1000) return `${(num / 1000).toFixed(1)}K` return num.toString() } const randomInRange = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min return { verifiedFollowers: randomInRange(200, 800), totalFollowers: formatNumber(randomInRange(1500, 5000)), impressions: formatNumber(randomInRange(200000, 800000)), impressionsChange: randomInRange(50, 500), engagementRate: randomInRange(3, 15), engagementRateChange: randomInRange(20, 80), engagements: formatNumber(randomInRange(20000, 80000)), engagementsChange: randomInRange(150, 500), profileVisits: formatNumber(randomInRange(2000, 8000)), profileVisitsChange: randomInRange(80, 200), replies: randomInRange(100, 400), repliesChange: randomInRange(50, 200), likes: formatNumber(randomInRange(2000, 8000)), likesChange: randomInRange(200, 600), reposts: randomInRange(100, 400), repostsChange: randomInRange(300, 900), bookmarks: formatNumber(randomInRange(1500, 5000)), bookmarksChange: randomInRange(400, 1000), shares: randomInRange(100, 300), sharesChange: randomInRange(500, 1500), } } export function generateRandomUser() { const firstNames = [ "Alex", "Jordan", "Taylor", "Morgan", "Casey", "Riley", "Avery", "Quinn", "Sage", "River", "Phoenix", "Dakota", "Skyler", "Rowan", "Finley", "Reese", ] const lastNames = [ "Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Hernandez", "Lopez", "Wilson", "Anderson", "Thomas", "Taylor", ] const adjectives = [ "Tech", "Code", "Dev", "Digital", "Cyber", "Web", "Cloud", "Data", "Pixel", "Byte", "Crypto", "AI", "Neural", "Quantum", "Virtual", "Meta", ] const nouns = [ "Wizard", "Ninja", "Guru", "Master", "Expert", "Pro", "Ace", "Legend", "Hero", "Champion", "Star", "Genius", "Maven", "Sage", "Oracle", "Titan", ] const firstName = firstNames[Math.floor(Math.random() * firstNames.length)] const lastName = lastNames[Math.floor(Math.random() * lastNames.length)] const adjective = adjectives[Math.floor(Math.random() * adjectives.length)] const noun = nouns[Math.floor(Math.random() * nouns.length)] const nameStyle = Math.random() const name = nameStyle > 0.5 ? `${firstName} ${lastName}` : `${firstName}` const handleStyle = Math.random() const handle = handleStyle > 0.5 ? `${adjective}${noun}${Math.floor(Math.random() * 999)}` : `${firstName}${lastName}${Math.floor(Math.random() * 99)}` return { name, handle: handle.toLowerCase(), initials: firstName.charAt(0) + (nameStyle > 0.5 ? lastName.charAt(0) : firstName.charAt(1)), } } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Home, Search, Bell, Mail, Bookmark, Users, BadgeCheck, User, MoreHorizontal, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { useMemo } from "react" import { generateRandomUser } from "@/lib/random-data" export function Sidebar() { const userData = useMemo(() => generateRandomUser(), []) return ( ) } function NavItem({ icon: Icon, label }: { icon: any; label: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/analytics-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useMemo } from "react" import { Calendar, Download, ChevronDown, Info } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ImpressionsChart } from "@/components/impressions-chart" import { FollowsChart } from "@/components/follows-chart" import { PostsRepliesChart } from "@/components/posts-replies-chart" import { MetricCard } from "@/components/metric-card" import { generateRandomMetrics } from "@/lib/random-data" export function AnalyticsDashboard() { const [selectedPeriod, setSelectedPeriod] = useState("3M") const metrics = useMemo(() => generateRandomMetrics(), []) return (

{/* Header */}

Analytics

Account overview

{["7D", "2W", "4W", "3M", "1Y"].map((period) => ( ))}

{/* Main Chart */}

Impressions Engagements Profile visits Engagements Profile visits

Daily Weekly Monthly Bar Line

{/* Secondary Charts */}

Follows over time

Posts

Replies

{/* Metrics Grid */}

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "next": "15.5.4", "react": "19.2.0", "react-dom": "19.2.0", "recharts": "2.10.3", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@types/react": "19.2.0", "@types/react-dom": "19.2.0", "@types/node": "24.6.2", "tailwindcss": "^4.1.9", "typescript": "5.9.3", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="components/impressions-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" const data = [ { date: "Jul 7", value: 2100 }, { date: "Jul 8", value: 1500 }, { date: "Jul 9", value: 1200 }, { date: "Jul 10", value: 1800 }, { date: "Jul 11", value: 2200 }, { date: "Jul 12", value: 1900 }, { date: "Jul 13", value: 1800 }, { date: "Jul 14", value: 2400 }, { date: "Jul 15", value: 2100 }, { date: "Jul 16", value: 1700 }, { date: "Jul 17", value: 1600 }, { date: "Jul 18", value: 2800 }, { date: "Jul 19", value: 3200 }, { date: "Jul 20", value: 2900 }, { date: "Jul 21", value: 2600 }, { date: "Jul 22", value: 3100 }, { date: "Jul 23", value: 2700 }, { date: "Jul 24", value: 6200 }, { date: "Jul 25", value: 24000 }, { date: "Jul 26", value: 5800 }, { date: "Jul 27", value: 4200 }, { date: "Jul 28", value: 3900 }, { date: "Jul 29", value: 4500 }, { date: "Jul 30", value: 5100 }, { date: "Jul 31", value: 28000 }, { date: "Aug 1", value: 4800 }, { date: "Aug 2", value: 3200 }, { date: "Aug 3", value: 2900 }, { date: "Aug 4", value: 3400 }, { date: "Aug 5", value: 4100 }, { date: "Aug 6", value: 31000 }, { date: "Aug 7", value: 3700 }, { date: "Aug 8", value: 2800 }, { date: "Aug 9", value: 2400 }, { date: "Aug 10", value: 2100 }, { date: "Aug 11", value: 1900 }, { date: "Aug 12", value: 2500 }, { date: "Aug 13", value: 2200 }, { date: "Aug 14", value: 1800 }, { date: "Aug 15", value: 2600 }, { date: "Aug 16", value: 2300 }, { date: "Aug 17", value: 2100 }, { date: "Aug 18", value: 1700 }, { date: "Aug 19", value: 1900 }, { date: "Aug 20", value: 2400 }, { date: "Aug 21", value: 2800 }, { date: "Aug 22", value: 3200 }, { date: "Aug 23", value: 2900 }, { date: "Aug 24", value: 3100 }, { date: "Aug 25", value: 8200 }, { date: "Aug 26", value: 8500 }, { date: "Aug 27", value: 4200 }, { date: "Aug 28", value: 3800 }, { date: "Aug 29", value: 4100 }, { date: "Aug 30", value: 3600 }, { date: "Aug 31", value: 3200 }, { date: "Sep 1", value: 2900 }, { date: "Sep 2", value: 122984 }, { date: "Sep 3", value: 18200 }, { date: "Sep 4", value: 16800 }, { date: "Sep 5", value: 15400 }, { date: "Sep 6", value: 17200 }, { date: "Sep 7", value: 19100 }, { date: "Sep 8", value: 18000 }, { date: "Sep 9", value: 16200 }, { date: "Sep 10", value: 14800 }, { date: "Sep 11", value: 15600 }, { date: "Sep 12", value: 17400 }, { date: "Sep 13", value: 16900 }, { date: "Sep 14", value: 15200 }, { date: "Sep 15", value: 16500 }, { date: "Sep 16", value: 14100 }, { date: "Sep 17", value: 13800 }, { date: "Sep 18", value: 15900 }, { date: "Sep 19", value: 17200 }, { date: "Sep 20", value: 16400 }, { date: "Sep 21", value: 15100 }, { date: "Sep 22", value: 14200 }, { date: "Sep 23", value: 13600 }, { date: "Sep 24", value: 14900 }, { date: "Sep 25", value: 16200 }, { date: "Sep 26", value: 15700 }, { date: "Sep 27", value: 14400 }, { date: "Sep 28", value: 13200 }, { date: "Sep 29", value: 70000 }, ] export function ImpressionsChart() { return ( `${value / 1000}K`} ticks={[0, 35000, 70000, 105000, 140000]} domain={[0, 140000]} /> { if (active && payload && payload.length) { return (

Tue, Sep 2

Impressions {payload[0].value.toLocaleString()}

) } return null }} /> ) } [V0_FILE]typescriptreact:file="components/follows-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts" const data = [ { date: "Jul 7", value: 2 }, { date: "Jul 10", value: 1 }, { date: "Jul 13", value: 3 }, { date: "Jul 16", value: 2 }, { date: "Jul 19", value: 5 }, { date: "Jul 22", value: 4 }, { date: "Jul 25", value: 8 }, { date: "Jul 28", value: 6 }, { date: "Jul 31", value: 7 }, { date: "Aug 3", value: 5 }, { date: "Aug 6", value: 9 }, { date: "Aug 9", value: 4 }, { date: "Aug 12", value: 3 }, { date: "Aug 15", value: 48 }, { date: "Aug 18", value: 52 }, { date: "Aug 21", value: 6 }, { date: "Aug 24", value: 8 }, { date: "Aug 27", value: 12 }, { date: "Aug 29", value: 115 }, { date: "Sep 1", value: 7 }, { date: "Sep 4", value: 5 }, { date: "Sep 7", value: 9 }, { date: "Sep 10", value: 11 }, { date: "Sep 12", value: 12 }, { date: "Sep 15", value: 8 }, { date: "Sep 18", value: 6 }, { date: "Sep 21", value: 7 }, { date: "Sep 24", value: 9 }, { date: "Sep 26", value: 8 }, ] export function FollowsChart() { return ( ) } [V0_FILE]typescriptreact:file="components/posts-replies-chart.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts" const data = [ { date: "Jul 7", posts: 1, replies: 0 }, { date: "Jul 10", posts: 0, replies: 1 }, { date: "Jul 13", posts: 1, replies: 1 }, { date: "Jul 16", posts: 0, replies: 2 }, { date: "Jul 19", posts: 0, replies: 2 }, { date: "Jul 22", posts: 1, replies: 1 }, { date: "Jul 25", posts: 2, replies: 3 }, { date: "Jul 28", posts: 1, replies: 2 }, { date: "Jul 31", posts: 2, replies: 4 }, { date: "Aug 3", posts: 1, replies: 3 }, { date: "Aug 6", posts: 3, replies: 2 }, { date: "Aug 9", posts: 1, replies: 1 }, { date: "Aug 12", posts: 0, replies: 2 }, { date: "Aug 15", posts: 2, replies: 5 }, { date: "Aug 18", posts: 3, replies: 6 }, { date: "Aug 21", posts: 1, replies: 4 }, { date: "Aug 24", posts: 2, replies: 3 }, { date: "Aug 27", posts: 3, replies: 7 }, { date: "Aug 29", posts: 3, replies: 11 }, { date: "Sep 1", posts: 2, replies: 5 }, { date: "Sep 4", posts: 1, replies: 4 }, { date: "Sep 7", posts: 2, replies: 6 }, { date: "Sep 10", posts: 3, replies: 8 }, { date: "Sep 12", posts: 2, replies: 12 }, { date: "Sep 15", posts: 1, replies: 9 }, { date: "Sep 18", posts: 2, replies: 7 }, { date: "Sep 21", posts: 3, replies: 10 }, { date: "Sep 24", posts: 4, replies: 11 }, { date: "Sep 26", posts: 4, replies: 8 }, ] export function PostsRepliesChart() { return ( ) } [V0_FILE]typescriptreact:file="components/metric-card.tsx" isEdit="true" import { Card } from "@/components/ui/card" import { VerifiedIcon } from "./verified-icon" interface MetricCardProps { label: string value: string subValue?: string change?: string positive?: boolean verified?: boolean } export function MetricCard({ label, value, subValue, change, positive, verified }: MetricCardProps) { return (

{label} {verified && }

{value} {subValue && / {subValue}}

{change && (

{change}

)} ) }

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This